<template>
  <van-search
    v-model="searchStr"
    shape="round"
    background="#4fc08d"
    placeholder="请输入搜索关键词"
    @search="onSearch"
  />

  <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item v-for="item in bannerArr" :key="item.bannerid">
      <img :src="item.img" class="swiper-img" />
    </van-swipe-item>
  </van-swipe>

  <van-row :gutter="[20, 20]" class="plist">
    <van-col
      span="12"
      v-for="item in productArr"
      :key="item.proid"
      @click="$router.push('/detail?id=' + item.proid)"
    >
      <van-image lazy-load class="list-img" :src="item.img1" />
      <div class="van-ellipsis">{{ item.proname }}</div>
      <div class="van-ellipsis">{{ item.originprice }}</div>
    </van-col>
  </van-row>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getBannerListAPI, getProductListAPI } from "@/api/home";
let router = useRouter();

const bannerArr = ref([]);
// 轮播图列表
getBannerListAPI().then((r) => {
  console.log(r.data);
  bannerArr.value = r.data.data;
});

const searchStr = ref("");
function onSearch() {
  router.push({
    path: "/search",
    query: { title: searchStr.value },
  });
}

// 商品列表
let productArr = ref([]);
// 引入 api/home.js中 getProductListAPI 商品列表请求函数
getProductListAPI(1, 10).then((r) => {
  console.log(r.data);
  productArr.value = r.data.data;
});
</script>
<style lang="css" scoped>
.box {
  /* 设计稿宽度 375px  */
  /* 写页面的时候，都按照设计稿的 宽度和高度 来 写元素的样式 */
  width: 187.5px;
}
.swiper-img {
  width: 100vw;
}
.list-img {
  width: 162.5px;
  height: 165px;
}
.plist {
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 50px;
}
.van-search {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 375px;
}
.van-swipe {
  margin-top: 54px;
}
</style>
